<template>
  <div class="hsx-post-type">
   <Vmask :maskTitle='maskTitle' :maskData='maskData' :showMask='showMask' :maskWidth='maskWidth' @FnMask='FnMask'></Vmask>
   <h3 class="lh40">岗位类型</h3>
   <div class="post-type-content bgc-fff">
     <el-row>
      <el-col :span="10">
        <div class="grid-content lh40">
          <el-row>
            <el-col :span="22">
              <div class="grid-content mb15">
                <div class="row clearfix">
                <div class="row-item clearfix fl">
                  <span class="fl span-input mr15">
                    <el-input placeholder="请输入类型" v-model="workJobName"></el-input>
                  </span>
                  <span class="row-item-title fl mr15">
                    <el-button type="primary" @click="FnSearch">查询</el-button>
                  </span>
                  <span class="row-item-title fl">
                    <el-button type="success" @click="FnShowAddType">添加</el-button>
                  </span>
                </div>
              </div>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content">
                <!-- <el-button type="success">添加</el-button> -->
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="show-table">
          <ShowTable :tableData='tableData' :selections='selections' :lableList='lableList' :talLength='talLength' :pageSize='pageSize' :pageNum='pageNum' @getSortableFn='getSortableFn'></ShowTable>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content post-type-content-submission" v-if="showAddType">
          <h4>添加类型</h4>
          <div class="row clearfix mb15">
                <div class="row-item clearfix fl">
                        <span class="row-item-title fl">
                  类型：
                </span>
                  <span class="fl span-input">
                    <el-input placeholder="请输入类型" v-model="types"></el-input>
                  </span>
                </div>
              </div>
          <div class="row clearfix mb15">
            <span class="row-item-title fl">
            备注：
          </span>
                <div class="row-item clearfix fl">
                  <span class="fl span-input">
                    <el-input placeholder="请输入类型" v-model="types" type="textarea" :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                  </span>
                </div>
              </div>
          <div class="row clearfix">
              <el-row>
                <el-button type="primary">提交</el-button>
                <el-button>取消</el-button>
              </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
   </div>
   <!-- <div class="a">
     <div class="menu" >
         <div class="left">
             <el-tree 
                class="treeitems"
                :data="data"
                show-checkbox
                node-key="id"
                :props="defaultProps" 
                @node-click="handleNodeClick"
                @check-change="handleCheck"
                default-expand-all
                ref="tree"
            >
            </el-tree>
        </div>
        <div class="right">
            <el-table
                :data="tableData"
                style="width: 100%"
                max-height="650">
                <el-table-column
                fixed
                prop="label"
                label="城市"
                width="160">
                </el-table-column>
                <el-table-column
                fixed
                prop="id"
                label="id"
                width="160">
                </el-table-column>
                <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <i @click="deleteRow(scope.$index, tableData,scope.row.id)"
                        class="tablei el-icon-delete">
                    </i>
                </template>
                </el-table-column>
            </el-table>
        </div>
        
    </div>
   </div> -->
  </div>
</template>

<script>
import ShowTable from '../components/table/show-table'
import Vmask from "../components/v-mask/v-mask"
import {WorkJobList,Code,AddWorkJob,DeleteWorkJob,SearchWorkJob} from '@/axios/api.js'
export default {
  name: '',
  data(){
    return {
      tableData: [],
        data: [{
            id:0,
            label: '中国',
            children: [{
                id:1,
                label: '北京',
                children: [{
                    id:11,
                    label: '通州'
                },{
                    id: 17,
                    label: '顺义'
                }]
            },
            {   
                id:3,
                label: '山西',
                children:[{
                    id: 13,
                    label: '太原'
                },{
                    id: 14,
                    label: '阳泉'
                },{
                    id:16,
                    label: '长治'
                }]
            },{
                id:4,
                label: '黑龙江',
                children: [{
                    id:12,
                    label: '哈尔滨'
                },{
                    id:13,
                    label: '齐齐哈尔市'
                },{
                    id: 14,
                    label: '牡丹江'
                },{
                    id: 15,
                    label: '佳木斯'
                }]
            }], 
        }],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
      workJobName:'',//查找类型
      showAddType:false,//显示添加类型
      types:'',
      maskWidth:'400px',
      maskTitle:'',
      showMask:false,
      maskData:{},
      tableData:[
        // {
        //   n1:'承办主管',
        //   delete:'1',
        // }
      ],
      selections:false,
      lableList:{
        n1:'类型',
        operation:'操作',
        // width:'150'
      },
      talLength:30,
      pageSize:15,
      pageNum:1
    }
  },
  props:[],
  created(){
    this.FnSearch()//岗位类型--岗位列表
  },
  mounted(){

  },
  methods:{
    handleNodeClick(e) {
            console.log(e);
            console.log(this.data);
            console.log(this.$refs.tree);
        },
       //复选框点击事件
        handleCheck(data,change){
            let nodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes()) 
            let filterNodes = nodes.filter(node=>{ // 过滤出子节点，也就是不含childred字段的节点数据
                return node.children === undefined
            })
            this.tableData=filterNodes;//赋值给表格数据
        },
        //删除按钮
        deleteRow(index,rows,id){
            this.$refs.tree.setChecked(id,false);//取消左侧复选框的选中状态
            rows.splice(index,1)//从tableData中删除数据
        },
        //复选框默认选中状态,应在请求数据处调用
        //现在用的是本地数据，如果导入的是请求后的来的数据，并且有返回是否选中的字段，可以将已选中的那些数据的id遍历出来一个数组，类似于[1,2,3],然后放到下方；
        selection(arrDa){

            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys([],true)//默认选中状态
            })
        },
    FnPaging () {
      SearchWorkJob({
        workJobName:this.lastData.workJobName,
        pageIndex:this.pageNum,
        pageSize:this.pageSize
      }).then(res=>{
        if(res.code==Code) {
          this.tableData = [];
          this.talLength = res.obj.total;
          var list = res.obj.records.slice();
          for(var i=0;i<list.length;i++) {
            this.tableData.push({
              n1:list[i].workJobName,
              delete:true,
              row:list[i]
            })
          }
        }
      })
    },
    FnSearch () {
      this.pageNum = 1;
      this.lastData = {
        workJobName:this.workJobName
      }
      this.FnPaging()
    },
    FnWorkJobList() {//岗位类型--岗位列表
      WorkJobList({

      }).then(res=>{
        if(res.code==Code) {
          this.tableData = [];
          this.talLength = res.obj.total;
          var list = res.obj.slice();
          for(var i=0;i<list.length;i++) {
            this.tableData.push({
              n1:list[i].workJobName,
              delete:true,
              row:list[i]
            })
          }
        }
      })
    },
    FnShowAddType () {//显示添加类型
      // this.showAddType = true;
      this.showMask = true;
      this.maskTitle = '添加类型';
      this.maskWidth = '350px';
      this.maskData = {
        types:'',
        textarea:'',
        defaultBox:true,
        postTypeBox:true
      }
    },
    FnMask (e) {
      if(e.type=='false') {
        this.showMask = false;
      }else if(e.type=='true') {
        if(e.content.postTypeBox) {
          if(e.content.types!=''&&e.content.textarea!=''){
            this.FnAddWorkJob(e.content.types,e.content.textarea)//新增岗位
          }else {
            this.$message.error("参数不能为空")
          }
        }else if(e.content.delete) {
            this.FnDeleteWorkJob(e.content.row)
        }
        
      }
    },
    FnDeleteWorkJob(e) {//删除上午
      DeleteWorkJob({
        _method:'delete',
        workJobId:e.workJobId
      }).then(res=>{
        if(res.code==Code) {
          this.$message.success("删除成功");
          this.showMask = false;
          this.FnWorkJobList()
        }
      })
    },
    FnAddWorkJob (e,v) {//新增岗位
      AddWorkJob({
        workJobName:e,
        remark:v
      }).then(res=>{
        if(res.code==Code) {
          this.$message.success("添加成功")
          this.FnWorkJobList()
          this.showMask = false;
          this.maskData = {}
        }
      })
    },
    getSortableFn(e) {
      if(e.type=='delete'){
        this.maskTitle = '删除提示';
        this.showMask = true;
        this.maskWidth = '400px';
        this.maskData = {
          defaultTitleBox:true,
          trueOrFalse:true,
          defaultTitle:`请问是否将类型 -${e.content.row.workJobName}- 删除`,
          delete:true,
          row:e.content.row
        }
      }else if(e.type=='pageNum') {
        this.pageNum = e.content
        this.FnPaging()
      }else if(e.type=='pageSize') {
        this.pageSize = e.content
        this.FnPaging()
      }
    }
  },
  components:{
    ShowTable,
    Vmask
  },
  computed:{

  },
  watch:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.hsx-post-type {
  min-width: 780px;
  .post-type-content {
    padding: 15px;
  }
  .post-type-content-submission {
    margin-left: 80px;
    h4 {
      line-height: 40px;
      font-size: 24px;
      margin-bottom: 30px;
    }
    .row {
      width: 300px;
      .row-item {
      }
    }
    
  }
}
</style>
